<template>
	<el-row class="gantt-container flex">
		<div :style="style">
			<slot>
				<my-table :data="ganttData" border v-bind="$attrs" @row-click="rowClick" />
			</slot>
		</div>
		<div ref="refGantt" class="f1 w0"></div>
	</el-row>
</template>

<script setup name="MyGantt">
import { addUnit } from 'element-plus/lib/utils/index.js';
import Gantt from './frappe-gantt';
import { date } from '@u/date';

/**
 * 例子
 *         <my-gantt
            :data="[
                // 表格数据
                {
                    start: '2023-04-03',
                    end: '2023-04-06',
                    name: '测试任务2',
                    id: '2',
                },
                {
                    start: '2023-04-04',
                    end: '2023-04-08',
                    name: '测试任务3',
                    id: '3',
                },
                {
                    start: '2023-04-08',
                    end: '2023-05-09',
                    name: '测试任务4',
                    id: '4',
                },
                {
                    start: '2023-04-03',
                    end: '2023-04-06',
                    name: '测试任务2',
                    id: '2',
                },
                {
                    start: '2023-04-04',
                    end: '2023-04-08',
                    name: '测试任务3',
                    id: '3',
                },
                {
                    start: '2023-04-08',
                    end: '2023-05-09',
                    name: '测试任务4',
                    id: '4',
                },
                {
                    start: '2023-04-03',
                    end: '2023-04-06',
                    name: '测试任务2',
                    id: '2',
                },
                {
                    start: '2023-04-04',
                    end: '2023-04-08',
                    name: '测试任务3',
                    id: '3',
                },
                {
                    start: '2023-04-08',
                    end: '2023-05-09',
                    name: '测试任务4',
                    id: '4',
                },
                {
                    start: '2023-04-03',
                    end: '2023-04-06',
                    name: '测试任务2',
                    id: '2',
                },
                {
                    start: '2023-04-04',
                    end: '2023-04-08',
                    name: '测试任务3',
                    id: '3',
                },
                {
                    start: '2023-04-08',
                    end: '2023-05-09',
                    name: '测试任务4',
                    id: '4',
                },
            ]"
            :columns="[
                {
                    label: '任务名称',
                    prop: 'name',
                },
                {
                    label: '开始日期',
                    prop: 'start',
                },
                {
                    label: '结束日期',
                    prop: 'end',
                },
            ]"
        ></my-gantt>
 */

/**
 * 属性参数
 * @property {Array} [data = []]  数据
 * @property {Object} [config = {}]  相关配置
 */
const props = defineProps({
	data: {
		type: Array,
		default() {
			return [];
		}
	},
	config: {
		type: Object,
		default() {
			return {};
		}
	},
	tableWidth: {
		type: [String, Number],
		default: 400
	}
});

/**
 * 计算表格宽度
 */
const style = computed(() => {
	const style = {};
	if (props.tableWidth) style.width = addUnit(props.tableWidth);
	return [style];
});

watch(
	() => props.data,
	(val) => {
		ganttData.value = val;
		createG();
	}
);

let gantt,
	refGantt = shallowRef(null),
	ganttData = ref(props.data);
const ganttConfig = computed(() => ({
	// 双击
	on_click: function (task) {
		console.log('双击操作', task);
	},
	// 数据变化
	on_date_change: function (task, start, end) {
		ganttData.value.forEach((element) => {
			if (element.id === task.id) {
				element.start = date(start, 'YYYY-MM-DD');
				element.end = date(end, 'YYYY-MM-DD');
			}
		});
	},
	// 进度变化
	on_progress_change: function (task, progress) {
		console.log(task, progress);
	},
	// 视图变化
	on_view_change: function (mode) {
		console.log(mode);
	},
	drag: false,
	language: 'zh',
	view_mode: 'Day', // header的日期类型
	date_format: 'YYYY-MM-DD', // 日期格式
	custom_popup_html: function (task) {
		return `
            <div class="details-container">
              <h5>${task.name}</h5>
              <p>Expected to finish by ${task.end}</p>
              <p>${task.progress}% completed!</p>
            </div>
            `;
	},
	...props.config
}));

function createG() {
	gantt = new Gantt(refGantt.value, ganttData.value, ganttConfig.value);
}

function rowClick(row) {
	gantt?.$container.scroll({
		left: document.getElementById(`bar_${row.id}`).getAttribute('x')
	});
}

onMounted(() => {
	createG();
});
onUnmounted(() => {
	gantt = null;
});
</script>

<style lang="scss" scoped>
@use './frappe-gantt/gantt.scss';
:deep() {
	.el-table thead {
		height: 60px;
	}
	.el-table .el-table__cell {
		height: 38px;
		padding: 0;
	}
}
</style>
